<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" import="com.server.web.JsVersionUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
	<meta charset="UTF-8">
	<title>北京市人民政府外事办公室领事保护教育服务平台——查看案例</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="<c:url value='/share/bootstrap.css'></c:url>">
	<link rel="stylesheet" href="<c:url value='/share/AllStyle.css'></c:url>">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="<c:url value='/js/jquery.min.js'></c:url>"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="<c:url value='/js/bootstrap.min.js'></c:url>"></script>
	<script src="<c:url value='/js/all.js'></c:url>"></script>
	<style type="text/css">
		.maskLayer{  
			position: fixed;
		    top: 0;
		    left: 0;
		    background: rgba(0,0,0,0.2);
				}
		#dialog{
			background-color:#fff;
			width:380px;
			height:295px;
			position:fixed !important; /* 浮动对话框 */
			position:absolute;
			top:35%;
			left: 40%;
			z-index:11;
			 box-shadow: 0 1px 2px grey;
			display: none;
			} 
			
			
		/* 反馈评分 */	
		.r1 {
		    float: left;
		    position: relative;
		    overflow: hidden;
		    background: #fff;
    		left: 66.5px;
    		margin-bottom:32px;
	    }
	    .rr{
	        float: left;
		    line-height: 30px;
		    position: relative;
		    overflow: hidden;
		    width: 40%;
		    margin-left: 72px;
		}
	   .star5 {
	        float: left;
	        position: relative;
	        margin: 4px 10px 0 10px;
	        width: 125px;
	        height: 20px;
	        background: url("/eduPlatform/share/images/xingxing3.png") 0 -30px no-repeat;
	    }
	    .star5ul,.star5ul_2 {
	        position: absolute;
	        top: 0;
	        left: 0;
	        z-index: 6;
	        width: 125px;
	        height: 20px;
	    }
	    #star5_red,#star5_red_2,#star5_red_3,#star5_red_4,#star5_red_5 {
	        position: absolute;
	        top: 0;
	        left: 0;
	        z-index: 5;
	        height: 20px;
	        background: url("/eduPlatform/share/images/xingxing3.png") 0 0 no-repeat;
	    }
	    .star5ul li,.star5ul_2 li{
	        overflow: hidden;
	        float: left;
	        width: 25px;
	        height: 20px;
	        cursor: pointer;
	        line-height: 20em;
	        background-position: 0 -30px;
	    }
	    .desc{
	    	float: left;
	    	margin-left: 48px;
	    	font-family: "微软雅黑";
	    	font-size: 15px;
	    	margin-bottom: 2px;
	    } 
	    .des{
	    	float:left;
	    	color:#575757;
	    	font-size:14px;
	    	margin-top:4px;
	    }
	    /* 评分   */
	    
	    /* 8.29 wzw */
	    .comment_btn{
	        width: 54px !important;  
     		height:54px !important;
     		right: -54px !important;
     		cursor:pointer;
     		
		}
		.case_details_title1{
			font-size:16px !important;
		}
		.case_details_content{
			margin: 23px 68px 36px 68px !important;
		}
		.textareaStyle{
			top:0px !important;
			padding:7px !important;
			resize:none;
		}
		.case_details_table input{
			padding:7px !important;
		}
		.inputStyle{
			line-height:32px;
		}
		.inputContent ul>li{
			padding:4px 7px;
			white-space: nowrap;
    		overflow: hidden;
    		text-overflow: ellipsis;
		}
		.glyphicon {
			top: 4px !important;
   			right: 3px !important;
		}
		#btn{
			width: 260px;
			background-color: #1e519f;
			font:14px "微软雅黑";
			color: #fff;
			height: 32px;
		}
		.zh5 {
	        float: left ;
	        position: relative;
	       	margin-left:20px;
	        width: 185px;
	        height: 17px;
	        background: url("/eduPlatform/share/images/xing2x.png") 0px 0px no-repeat;
	        
	    }
	    .zh5ul {
	        position: absolute;
	        top: 0;
	        left:0;
	        z-index: 6;
	        width: 185px;
	        height: 17px;
	    }
	    #zh5_red,#zh5_red_2,#zh5_red_3 {
	        position: absolute;
	        top: 0;
	        left: 0;
	        z-index: 5;
	        height: 17px;
	        background: url("/eduPlatform/share/images/xing2x.png") 0px -47px no-repeat;
	    }
	    .zh5ul li{
	        overflow: hidden;
	        float: left;
	        width: 37px;
	        height: 17px;
	        cursor: pointer;
	        line-height: 17em;
	       background-position: 2px -59px;
	    }
	    .inputTitle_1 {
		    text-align: center;
		    width: 16%;
		    height: 30px;
		    background-color: #f9f9f9;
		    color: #2955aa;
		}
		.inputTitle_2 {
		 	
		    color: #2955aa;
		    background-color: #f9f9f9;
		}
	</style>
</head>
<body>
	<div class="home_content Interface_center" style="position: relative;width:1200px">
		
		<img src="<c:url value='/share/images/comment.png'/>" alt="" class="comment_btn" style="left: calc(50%  + 600px) !important;position: fixed;top: 60px;margin: 0;z-index:10">
		<!-- 评分  -->
		<div style="height:60px;">
		    <div class="rr" style="">
		    	<span class="desc">综&nbsp;合&nbsp;评&nbsp;&nbsp;分&nbsp; ：  </span>
                <div class="star5">
                    <ul id="star5ul_3" class="starul_3">
                         <li val="1" class=""></li>
                         <li val="2" class=""></li>
                         <li val="3" class=""></li>
                         <li val="4" class=""></li>
                         <li val="5" class=""></li>
                    </ul>
                    <div id="star5_red_3" data_star="" style="width:${score.total*20}%"></div>
                </div>
                <span class="score">${score.total}</span>      
            </div>
            <div class="rr" style="">
		    	<span class="desc">案例清晰度 ： </span>
                <div class="star5">
                    <ul id="star5ul_4" class="starul_4">
                         <li val="1" class=""></li>
                         <li val="2" class=""></li>
                         <li val="3" class=""></li>
                         <li val="4" class=""></li>
                         <li val="5" class=""></li>
                    </ul>
                    <div id="star5_red_4" data_star="" style="width:${score.clarity*20}%"></div>
                    
                </div>
                <span class="score">${score.clarity}</span>      
            </div>
            <div class="rr" style="">
		    	<span class="desc">案例实用度 ：  </span>
                <div class="star5">
                    <ul id="star5ul" class="starul">
                         <li val="1" class=""></li>
                         <li val="2" class=""></li>
                         <li val="3" class=""></li>
                         <li val="4" class=""></li>
                         <li val="5" class=""></li>
                    </ul>
                    <div id="star5_red" data_star="" style="width:${score.utility*20}%"></div>
                    
                </div>
                <span class="score">${score.utility}</span>      
            </div>
            <div class="rr" style="">
		    	<span class="desc">案例启发性 ：  </span>
                <div class="star5">
                    <ul id="star5ul_2" class="starul_2">
                         <li val="1" class=""></li>
                         <li val="2" class=""></li>
                         <li val="3" class=""></li>
                         <li val="4" class=""></li>
                         <li val="5" class=""></li>
                    </ul>
                    <div id="star5_red_2" data_star="" style="width:${score.heuristic*20}%"></div>
                    
                </div>
                <span class="score">${score.heuristic}</span>
            </div>
		</div>
		
		
		
		<div class="case_details_content">
			<!-- 我是王紫薇的分割线 -->
			<div class="case_details_title1">${caseMap.name}案例</div>
			<div class="triangleImg1"><img src="<c:url value='/share/images/triangle2.png'/>" alt=""></div>
			<table class="case_details_table" border="1px" style="border-collapse:collapse">
				<tr>
				    <td class="inputTitle_1">案例名称</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.name }" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">案例类型</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.class1},${caseMap.class2},${caseMap.class3}" class="inputStyle"  readonly="readonly"/>							
					</td>
				</tr>
				<tr>
					<td class="inputTitle_1">案例内容</td>
					<td class="inputContent" colspan="3">
		<%-- 						<input type="text" class="inputStyle" value="${caseMap.content}" readonly="readonly"/> --%>
						<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.content}</textarea>							
					</td>
				</tr>
				
			</table>

			<div class="case_details_title2-1">
				基本信息
			</div>
			<div class="case_details_title2-2"></div>
			<div class="case_details_title2-3"></div>	
			<div class="triangleImg1"><img src="<c:url value='/share/images/triangle2.png'/>" alt=""></div>
			<table class="case_details_table" border="1px" style="border-collapse:collapse">
				<tr>
				    <td class="inputTitle_1">时间</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.time}${caseMap.halfDay}" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">国家/地区</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.country_area }" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">辖区范围</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.area_range}" class="inputStyle"  readonly="readonly" />
					</td>
				</tr>
				<tr>
				    <td class="inputTitle_1">涉事人数</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.involved_num}" class="inputStyle" readonly="readonly"/>
					</td>
					<td class="inputTitle_1">男性人数</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.male_num}" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">女性人数</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.female_num}" class="inputStyle" readonly="readonly" />
					</td>
				</tr>
				<tr>
				    <td class="inputTitle_1">涉事人姓名</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.involved_name}" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">年龄</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.involved_age}" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">出境目的</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.exit_purpose}" class="inputStyle" readonly="readonly"  />
					</td>
				</tr>
				<tr>
				    <td class="inputTitle_1">办理出国手续方式</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.way_abroad}" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">职业类别</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.vacation_class}" class="inputStyle" readonly="readonly" />
					</td>
					<td class="inputTitle_1">工作单位</td>
					<td class="inputContent">
						<input type="text" value="${caseMap.work_place}" class="inputStyle" readonly="readonly"  />
					</td>
				</tr>			
			</table>

			<div class="case_details_title2-1">
				案例详情
			</div>
			<div class="case_details_title2-2"></div>
			<div class="case_details_title2-3"></div>	
			<div class="triangleImg1"><img src="<c:url value='/share/images/triangle2.png'/>" alt=""></div>
			<table class="case_details_table" border="1px" style="border-collapse:collapse">
				<tr>
					<td class="inputTitle_1">事情发生经过</td>
					<td class="inputContent" colspan="3">
						<%-- <input type="text" class="inputStyle" value="${caseMap.event_occurs}" readonly="readonly" /> --%>
						<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.event_occurs}</textarea>							
					</td>
				</tr>
				<tr>
					<td class="inputTitle_1">事件主要原因</td>
					<td class="inputContent" colspan="3">
						<%-- <input type="text" class="inputStyle" value="${caseMap.cause}" readonly="readonly" /> --%>	
						<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.cause}</textarea>						
					</td>
				</tr>
				<tr>
					<td class="inputTitle_1">造成后果</td>
					<td class="inputContent" colspan="3">
			<%-- 			<input type="text" class="inputStyle" value="${caseMap.results}" readonly="readonly"/>	 --%>
						<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.results}</textarea>						
					</td>
				</tr>
				<tr>
				    <td class="inputTitle_1">受伤人数</td>
					<td class="inputContent">
						<input type="text" class="inputStyle" value="${caseMap.injured_num}" readonly="readonly" />
					</td>
					<td class="inputTitle_1">死亡人数</td>
					<td class="inputContent">
						<input type="text" class="inputStyle" value="${caseMap.death_num}" readonly="readonly" />							
					</td>
				</tr>
				<tr>
				    <td class="inputTitle_1">财物损失</td>
					<td class="inputContent" colspan="3">
					<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.finance_loss}</textarea>
						<%-- <input type="text" class="inputStyle" value="${caseMap.finance_loss}" readonly="readonly" /> --%>
					</td>
				</tr>
				<tr>
					<td class="inputTitle_2">影音资料</td>
					<td class="inputContent"  colspan="3">
						<div style="text-align:left;" class="textareaStyle"  disabled="disabled" autoHeight="true">  
							<c:if test="${not empty caseMap.atta_vedio}"> 
							<c:forEach items="${caseMap.atta_vedio}" var="li" >
								<li><a target='_blank' class='aTagUnderLine' href="<c:url value='/attach/download/${li.id}'/>">
							${li.fileName}</a>&nbsp;&nbsp;<a href="javascript:view(${li.id},'${li.fileType}')">[预览]</a></li>
							</c:forEach>
							</c:if> 
						</div>						
					</td>
				</tr>
				<tr>
					<td class="inputTitle_1">其他附件</td>
					<td class="inputContent"  colspan="3">
						<div style="text-align:left;" class="textareaStyle"  disabled="disabled" autoHeight="true">  
							<c:if test="${not empty caseMap.atta}"> 
							<c:forEach items="${caseMap.atta}" var="li" >
								<a target='_blank' class='aTagUnderLine' href="<c:url value='/attach/download/${li.id}'/>">
							${li.fileName}</a>&nbsp;&nbsp;&nbsp;&nbsp;
							</c:forEach>
							</c:if> 
						</div>						
					</td>
				</tr>
				
			</table>

			<div class="case_details_title2-1">
				案例分析
			</div>
			<div class="case_details_title2-2"></div>
			<div class="case_details_title2-3"></div>	
			<div class="triangleImg1"><img src="<c:url value='/share/images/triangle2.png'/>" alt=""></div>
			<table class="case_details_table" border="1px" style="border-collapse:collapse">
				<tr>
					<td class="inputTitle_2">案例处理流程</td>
					<td class="inputContent" colspan="3">
						<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.handle_pro}</textarea>
					</td>
				</tr>
				<tr>
					<td class="inputTitle_2">案例分析</td>
					<td class="inputContent" colspan="3">
						<textarea name=""  class="textareaStyle" disabled="disabled" autoHeight="true">${caseMap.analysis}</textarea>
					</td>
				</tr>
			</table>
			
			<div class="case_details_title2-1">
				其他
			</div>
			<div class="case_details_title2-2"></div>
			<div class="case_details_title2-3"></div>	
			<div class="triangleImg1"><img src="<c:url value='/share/images/triangle2.png'/>" alt=""></div>
			<table class="case_details_table" border="1px" style="border-collapse:collapse">
				<tr>
					<td class="inputTitle_2">信息来源</td>
					<td class="inputContent" colspan="3">
						<textarea name=""  class="textareaStyle"  disabled="disabled" autoHeight="true">${caseMap.inforSource}</textarea>
					</td>
				</tr>
			</table>

		</div>
	</div>
			<!--  评价-->
	<div id="_bg" style="height:100%;width:100%;">	
		 <div  id="dialog">
				<button type="button" class="close" onclick="closeBg();" data-dismiss="modal" aria-label="Close" style="margin-right: 5px;"><span aria-hidden="true">×</span></button>
				<div style="position: relative; top: 16px; margin-left: 156px; margin-right: auto; font-size: 16px;color:#535353">案例评价</div>
				<img src="<c:url value='/share/images/pingjiaxian_03.png'/>" style="width: 74%; height: auto; margin-top: 20px; margin-bottom: 20px; position: relative;left: 52px;">
				<div class="r1" >
                        <span class="des">案例实用度&#58;</span>
                  	     <div class="zh5">
                              <ul id="zh5ul" class="zh5ul">
                                  <li val="1" class=""></li>
                                  <li val="2" class=""></li>
                                  <li val="3" class=""></li>
                                  <li val="4" class=""></li>
                                  <li val="5" class=""></li>
                              </ul>
                              <div id="zh5_red" data_star=""></div>
                        </div>
                       
                </div>
                <div class="r1" >
                        <span class="des">案例清晰度&#58;</span>
                        <div class="zh5">
                              <ul id="zh5ul_2" class="zh5ul">
                                  <li val="1" class=""></li>
                                  <li val="2" class=""></li>
                                  <li val="3" class=""></li>
                                  <li val="4" class=""></li>
                                  <li val="5" class=""></li>
                              </ul>
                              <div id="zh5_red_2" data_star=""></div>
                        </div>
                </div>
                <div class="r1" >
                        <span class="des">案例启发性&#58;</span>
                        <div class="zh5">
                              <ul id="zh5ul_3" class="zh5ul">
                                  <li val="1" class=""></li>
                                  <li val="2" class=""></li>
                                  <li val="3" class=""></li>
                                  <li val="4" class=""></li>
                                  <li val="5" class=""></li>
                              </ul>
                              <div id="zh5_red_3" data_star=""></div>
                        </div>
                </div>
                <div class="r1">
                	<button type="button" id="btn" class="btn btn-sm login" data-toggle="modal" >提交</button>
                	<!--  <button class="btn btn-primary" id="btn" style="padding: 2px 94px;border: 1px solid #82b4ee;margin: 6px 82px;"><p style="font-size: 14px;margin: 0px;">提交</p></button>
					-->
				</div>
		</div>
	</div>
	<script type="text/javascript">
	
	var rootPath = '${rootPath}';
	var userName = '${userName}';

	if(!userName){
		$(".comment_btn").hide();
	}
	
		$(function(){
			$(".comment_btn").click(function(){
				$("#_bg").addClass("maskLayer");
				$("#dialog").show();
			});
			//可接受度星级评定
    		//可接受度星级评定
    		var caseId = '${caseMap.id}';
    		var userName = '${userName}';
   		 $("#zh5ul li").each(function(index, element) {
            var _this = $(this);
            var nowStar = _this.attr("val");
            _this.hover(function() {
                $("#zh5_red").attr("class", "cur" + nowStar);
            });

            _this.on("click", function() {
                $("#zh5_red").attr("data_star", nowStar);
                _this.parent().parent().next().removeClass("error");
            })
        });

        $("#zh5ul").on("mouseout", function() {
            if ($("#zh5_red").attr("data_star")) {
                $("#zh5_red").attr("class", "cur" + $("#zh5_red").attr("data_star"));
            } else {
                $("#zh5_red").removeClass();
            }
        });

        //课程内容质量星级评定
        $("#zh5ul_2 li").each(function(index, element) {
        	console.log("初始2");
            var _this = $(this);
            var nowStar = _this.attr("val");
            _this.hover(function() {
            		console.log("滑动2");
                $("#zh5_red_2").attr("class", "cur" + nowStar);
            });

            _this.on("click", function() {
            		console.log("点击2");
                $("#zh5_red_2").attr("data_star", nowStar);
                _this.parent().parent().next().removeClass("error");
            })
        });

        $("#zh5ul_2").on("mouseout", function() {
            if ($("#zh5_red_2").attr("data_star")) {
                $("#zh5_red_2").attr("class", "cur" + $("#zh5_red_2").attr("data_star"));
            } else {
                $("#zh5_red_2").removeClass();
            }
        });
    
		        //星级评定3
		    $("#zh5ul_3 li").each(function(index, element) {
            var _this = $(this);
            var nowStar = _this.attr("val");
            _this.hover(function() {
                $("#zh5_red_3").attr("class", "cur" + nowStar);
            });

            _this.on("click", function() {
                $("#zh5_red_3").attr("data_star", nowStar);
                _this.parent().parent().next().removeClass("error");
            })
	        });
	
	        $("#zh5ul_3").on("mouseout", function() {
	            if ($("#zh5_red_3").attr("data_star")) {
	                $("#zh5_red_3").attr("class", "cur" + $("#zh5_red_3").attr("data_star"));
	            } else {
	                $("#zh5_red_3").removeClass();
	            }
	        });
			$("#btn").click(function(){
				if(userName){
					var url = "<c:url value='/case/study/score/'/>"+caseId;
					var utility = $("#zh5_red").attr("data_star");
					var clarity = $("#zh5_red_2").attr("data_star");
					var heuristic = $("#zh5_red_3").attr("data_star");
					$.ajax({
						url : url,
						type : "post",
						dataType:"json",
						data:{
							"utility":utility,
							"clarity":clarity,
							"heuristic":heuristic,
						},
						success:function(json){
							if(json.isSuccess){
								//alert(json.info);
								closeBg();
							}else{
								alert(json.info);
							}
						}
						
					});
				}else{
					alert("请登录");
				}
				
				
			});

		});
		function closeBg() {
		$("#dialog").hide();
		$("#_bg").removeClass("maskLayer");
		} 
		
		
		
		/* textarea div高度自适应 */
		$.fn.autoHeight = function(){
	
			function autoHeight(elem){
				elem.style.height = 'auto';
				elem.scrollTop = 0; //防抖动
				elem.style.height = elem.scrollHeight + 'px';
			}
		
			this.each(function(){
				autoHeight(this);
				$(this).on('keyup', function(){
					autoHeight(this);
				});
			});
 
		}
		$('div[autoHeight]').autoHeight();
		$('textarea[autoHeight]').autoHeight();
		
		function view(id,fileType){
			//支持格式：mp3、wav、ogg;mp4、webm、mpeg4
			var url = null;
			if(fileType == 'mp3' || fileType == 'wav' || fileType == 'ogg'){
				url = rootPath +"/attach/audioView/"+id;
			}else if(fileType == 'mp4' || fileType == 'webm' || fileType == 'mpeg4'){
				url = rootPath +"/attach/videoView/"+id;
			}else{
				alert('系统不支持'+fileType+'格式附件的预览！');
				return;
			}
			window.open(url);
		}
		
	</script>
</body>
</html>
